<template>
  <div class="problem-feedback">
    <div class="bg">
      <div class="text">为了给您提供更好的用户体验，我们期待您的建议。</div>
      <div class="input-text">
        <textarea
          v-model="desc"
          :maxlength="maxlength"
          @input="descInput"
          placeholder="请填写您的建议…"
        ></textarea>
      </div>
      <div class="tip">还可以写 {{ limitLength }} 字</div>
    </div>

    <div class="submit">
      <van-button
        type="info"
        size="large"
        @click="submitFeedback"
        :disabled="isSubmitting"
        >{{ isSubmitting ? "正在提交" : "提交建议" }}</van-button
      >
    </div>
  </div>
</template>

<script>
import { Button, Toast } from "vant";
import http from "../service/myHttp.js";
import urls from "../service/url.js";
import { mapState } from "vuex";

export default {
  components: {
    vanButton: Button
  },
  data() {
    return {
      maxlength: 200,
      limitLength: "",
      desc: "",
      isSubmitting: false
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.login_module.userinfo,
      countAlias: "userInfo"
    })
  },
  mounted() {
    this.limitLength = this.maxlength;
  },
  methods: {
    // 计算输入字数
    descInput() {
      var txtVal = this.desc.length;
      this.limitLength = this.maxlength - txtVal;
    },
    // 提交问题反馈
    submitFeedback() {
      if (this.desc.length <= 10) {
        Toast("不可少于10个字");
        return false;
      }

      this.isSubmitting = true;

      http
        .post(urls.WTFK, {
          tokenId: this.userInfo.id,
          content: this.desc
        })
        .then(res => {
          this.isSubmitting = false;
          if (res.data.code == 200) {
            let data = res.data.data;
            Toast.success("提交成功");
            setTimeout(() => {
              this.$router.go(-1);
            }, 1000);
          }
        });
    }
  }
};
</script>

<style scoped>
.problem-feedback {
  }

.problem-feedback .bg {
  padding: 10px 15px;
  background-color: #fff;
}

.input-text {
  margin-top: 10px;
}

.input-text textarea {
  width: calc(100% - 15px * 2);
  padding: 10px 15px;
  height: 80px;
  border: 0;
  border-radius: 6px;
  background-color: var(--line-between-color);
  overflow: hidden;
}

.input-text textarea::-webkit-input-placeholder {
  color: #8b898c;
}

.tip {
  text-align: right;
  margin-top: 10px;
}

.submit {
  margin-top: 20px;
}
</style>
